<script lang="ts" setup>
import customButton from "@/components/custom-button/custom-button.vue";



const handleMessageClick = () => {
  uni.navigateTo({
    url: '/pages/message/index'
  });
};

const handleSignInClick = () => {
  uni.navigateTo({
    url: '/pages/sign-in/index'
  });
};

const handleReleaseClick = () => {
  uni.navigateTo({
    url: '/pages/release/index'
  });
};

const handleClaimClick = () => {
  uni.navigateTo({
    url: '/pages/claim/index'
  });
};
</script>

<template>
  <view class="container">
    <!-- 导航栏 -->
    <view class="navigation">
      <view class="navigation_button">
        <customButton
            border-radius="40px"
            margin="50px 20rpx"
            type="white"
            width="80rpx"
            @click="handleMessageClick"
        >
          <img class="message_icon" src="../../static/icons/message_icon.png"/>
        </customButton>
      </view>
      <view class="vip_button">
        <customButton
            border-radius="40px"
            margin="50px 10rpx"
            type="white"
            @click="handleSignInClick"
        >
          <img class="vip_icon" src="../../static/icons/vip_icon.png"/>签到
        </customButton>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <view class="content_card">
        <!-- 发布卡片 -->
        <view class="card-section" @click="handleReleaseClick">
          <view class="icon-wrapper">
            <image class="card-icon" mode="aspectFit" src="../../static/icons/release.png"/>
          </view>
          <view class="text-wrapper">
            <text class="card-title">发布</text>
            <text class="card-desc">丢失物品，寻物启事</text>
          </view>
        </view>
        <view class="card-divider"></view>
        <!-- 认领卡片 -->
        <view class="card-section" @click="handleClaimClick">
          <view class="icon-wrapper">
            <image class="card-icon" mode="aspectFit" src="../../static/icons/claim.png"/>
          </view>
          <view class="text-wrapper">
            <text class="card-title">认领物品</text>
            <text class="card-desc">捡到物品，认领失主</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #f5f7fa;
  position: relative;
}

/* 导航栏样式 */
.navigation {
  position: fixed;
  top: 0;
  width: 100%;
  height: 200rpx;
  background-color: #5577fc;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  z-index: 1000;
}

.vip_icon,
.message_icon {
  width: 30px;
  height: 30px;
}

/* 内容区域样式 */
.content {
  margin-top: 200rpx;
  padding: 40rpx 30rpx;
}

.content_card {
  width: 92vw;
  height: 280rpx;
  display: flex;
  background: linear-gradient(135deg, #526fdd, #5577fc, #4b6ef3);
  justify-content: space-between;
  align-items: center;
  border-radius: 32rpx;
  margin: 0 auto;
  box-shadow: 0 8rpx 30rpx rgba(85, 119, 252, 0.25);
  overflow: hidden;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
  }
}

.card-section {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  transition: all 0.3s ease;
  padding: 30rpx;

  &:active {
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(0.98);
  }
}

.icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.card-icon {
  width: 60rpx;
  height: 60rpx;
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.card-title {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.card-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 24rpx;
  font-weight: 400;
  letter-spacing: 1rpx;
}

.card-divider {
  width: 2rpx;
  height: 120rpx;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%
  );
  margin: 0 20rpx;
}
</style>
